{extends file="./main.tpl"}
{block name=head}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	$(".add").blur(function()
	{
	  if($(".add:last").val() != '' && $(".add:last").val() > 0)
	  {
      $("#one").clone(true).appendTo("#mainDiv")
      .find('input[type="text"]').val('').end()
      .find('select[option=""]').val('');
      var rowCount = $('#mainDiv tr').length;
      $(".srno:last").val(rowCount);
    }
  });
});
  function itemAjax(itemObj)
  {
  	var row = $(itemObj).parents('.one');
  	var itemVal = $(itemObj).val();
  	$.ajax({
  	  url:'ajaxRisponceItem.php',
  	  data:'itemVal='+itemVal,
  	  dataType:'HTML',
  	  type:'POST',
  	  
  	  success:function(msg){
  	  	row.find('.sizeSelect').html(msg);
  	  }
    });
  }
  
  function sizeAjax(sizeVal)
  {
  	var row = $(sizeVal).parents('.one');
    var itemVal = $("#itemSelect").val();
    var dataString = 'sizeVal='+sizeVal + '&itemVal=' + itemVal;
    $.ajax({
  	  url:'ajexResponceSize.php',
      data: dataString,
  	  dataType:'HTML',
  	  type:'POST',
  	  
  	  success:function(msg){
  	  	$('.companySelect:last').html(msg);
  	  }
    });
  }
  
  function companyAjax(companyVal)
  {
  	var row = $(companyVal).parents('#one');
  	var itemVal = $("#itemSelect").val();
  	var sizeVal = $("#sizeSelect").val();
  	var dataString = 'companyVal='+companyVal + '&itemVal=' + itemVal + '&sizeVal=' + sizeVal ;
  	$.ajax({
  	  url:'ajaxRisponceIcompany.php',
      data: dataString,
  	  dataType:'HTML',
  	  type:'POST',
  	  
  	  success:function(msg){
  	  	$('.qualitySelect:last').html(msg);
  	  }
    });
  }
  
  function qualityAjax(qualityVal)
  {
  	var row = $(qualityVal).parents('#one');
  	var itemVal = $("#itemSelect").val();
  	var sizeVal = $("#sizeSelect").val();
  	var companyVal = $("#companySelect").val();
  	var dataString = '&qualityVal='+ qualityVal + '&companyVal='+ companyVal + '&itemVal=' + itemVal + '&sizeVal=' + sizeVal ;
  	$.ajax({
  	  url:'ajaxResponceQuality.php',
      data: dataString,
  	  dataType:'HTML',
  	  type:'POST',
  	  
  	  success:function(msg){
  	  	$('#colorSelect:last').html(msg);
  	  }
    });
  }
  function myFunction()
  {
    if(confirm("You Want To Remove This Record") == true)
	  {
		  return true;
	  }
	  else
	  {
		  return false;
	  }
  }

function setAmount(rateObj)
{
	var row = $(rateObj).parents('.one');
	var quantity = parseFloat($(row).find('#quantity').val());
	var rate     = parseFloat($(rateObj).val());
	var amount = 0;

	if(!isNaN(quantity) && !isNaN(rate))
	{
		amount = (quantity * rate);
		row.find('.amount').val(amount.toFixed(2));
	}
	else
		row.find('.amount').val('');
}
function setAmountOnQty(QtyObj)
{
	var row      = $(QtyObj).parents('.one');
	var rate     = parseFloat($(row).find('.rate').val());
	var quantity = parseFloat($(QtyObj).val());
	var amount   = 0;

	if(!isNaN(quantity) && !isNaN(rate))
	{
		amount = (quantity * rate);
		row.find('.amount').val(amount.toFixed(2));
	}
	else
		row.find('.amount').val('');
}

function setColumnTotal()
{
  var totalQty    = 0;
  var totalAmount = 0;	
  
  $('.quantity').each(function(i)
  {
    quantity = $(this).val().replace("$","");
    if(!isNaN(quantity))
    {
    	totalQty+= Number(quantity);
    }
  }); 
    
  $('.amount').each(function(i)
  {
    amount = $(this).val().replace("$","");
    if(!isNaN(amount))
    {
    	totalAmount+= Number(amount);
    }
  });

  $('#totalQty').val(totalQty.toFixed(0));
  $('#totalAmount').val(totalAmount.toFixed(2));
}
</script>
{/block}
{block name=body}
<form name="party" action="{$smarty.server.PHP_SELF}" method="POST">
<table align="center" border="1" cellpadding="2" cellspacing="2">
  <tr>
    <td align="center" class="table1" colspan="4">
    	<select name="order" autofocus />
        {html_options options=$arrayOrder} 
      </select>  
    </td>
  </tr>
  <tr>
    <td class="table2">PartyName
  	  <select name="partyId" autofocus required />
  	    <option value="" id="partyId">Select</option>
  	    {html_options values=$partyArray.partyId output=$partyArray.partyName}
      </select>
    </td>
    <!--<input type="text" name="partyName" autofocus=autofocus required=""required>-->
    <th class="table2">Date :
      {html_select_date prefix="billDate" start_year ="-0" end_year="+2" field_order="DMY" month_format="%m" day_value_format="%02d"}
    </th>
  </tr>
  <tr>
    <td class="table2">
    	New Party <input type="text" name="newPartyName" id="newPartyName" />
    </td>
    <td class="table2">
      Contact No <input type="text" name="contactNo" id="contactNo" />
    </td>
  </tr>
</table>
<table align="center" border="1" cellpadding="2" cellspacing="2" width="" >
  <tr>
    <th class="table2">Sr No</th>
    <th class="table2">Item</th>
    <th class="table2">Size</th>
    <th class="table2">Company</th>
    <th class="table2">Quality</th>
    <th class="table2">Color</th>
    <th class="table2">Quantity</th>
    <th class="table2">Rate</th>
    <th class="table2">Amount</th>
  </tr>
  <tbody id="mainDiv">
<!--===========Item Select box ===============-->	
    <tr id="one" class="one">
      <td><input type="text" name="srno[]" id="srno[]" class="srno" size="3" value="1" disabled />
      </td>
      <td align="center" class="table2">
	      <select name="itemId[]" id="itemSelect"  onchange="itemAjax(this)">
	        <option value="0">Select Item</option>
	        {html_options values=$itemArray.itemId output=$itemArray.itemName}
        </select>
      </td>
<!--===========Size Select box ===============-->
      <td align="center" class="table2">
        <select name="sizeId[]" id="sizeSelect" class="sizeSelect" onchange="sizeAjax(this)">
      	  <option value="0">Select Size</option>
        </select>
      </td>
<!--===========Company Select box ===============-->
      <td align="center" class="table2">
	      <select name="companyId[]" id="companySelect" class="companySelect" onchange="companyAjax(this)">
	        <option value="0">Select Company</option>
        </select> 
      </td>
<!--===========Quality Select box ===============-->
      <td align="center" class="table2">
	      <select name="qualityId[]" id="qualitySelect" class="qualitySelect" onchange="qualityAjax(this)">
	        <option value="0">Select Quality</option>
        </select>
      </td>
<!--===========Color Select box ===============-->
      <td align="center" class="table2">
	      <select name="colorId[]" id="colorSelect" class="colorSelect">
	        <option value="0">Select Color</option>
        </select>
      </td>
      <td class="table2">
        <input type="text" name="qty" id="quantity" class="quantity" value="" Size="3" 
         onblur="setAmountOnQty(this); setColumnTotal();" />
      </td>
      <td class="table2">
        <input type="text" name="rate" value="" class="add rate" onblur="setAmount(this); setColumnTotal();" />
      </td>
      <td class="table2">
        <input type="text" name="amount" class="amount" value="" onblur="setColumnTotal();" />
      </td>
    </tr>
  </tbody>
  <tr>
  	<th class="table2" colspan="6" align="right">Total</th>
    <td class="table2"><input type="text" Size="3" id="totalQty" DISABLED /></td>
    <td class="table2">&nbsp;</td>
    <td class="table2"><input type="text" id="totalAmount" DISABLED /></td>
  </tr>
  <tr>
    <td class="table1" align="center" colspan="9	" ><input type="submit" name="submit" value="Submit" class="button" /></td>
  </tr>
  </table>
  </form>
{/block}